<template>
  <div class="c-bg-white">
    <div class="c-w100 c-hh136 c-pl26 c-flex-row c-aligni-center">
      <span class="c-pr32 c-fs26 c-fc-xblack">举报类型</span>
      <span class="c-fs26 c-fc-xblack">{{reportTypeMap[reportType]}}</span>
    </div>
    <!-- 举报描述 -->
    <div class="c-flex-row c-aligni-center c-w100 c-hh56 c-pl26 c-fs26 c-fc-xblack">举报描述</div>
    <div class="c-pv10 c-pl26 c-pr26">
      <div class="c-bg-sgray c-br10 c-ph20 c-pv20">
        <textarea
          rows="5"
          class="c-bg-sgray c-fc-gray c-w100 c-bd0 c-fs24"
          :maxlength="1024"
          :placeholder="'请描述您的举报理由，提交该用户违规的证据。'"
          v-model="questionDesc"
        ></textarea>
        <div class="c-fs22 c-fc-gray c-textAlign-r"> {{questionDesc.length}}/1024 </div>
      </div>
    </div>
    <div class="c-pt50 c-pb20 c-fs26 c-fc-xblack c-pl26">上传图片</div>
    <div class="c-flex-wrap c-flex-row c-pl26 c-pr26">
      <div
        class="c-ww140 c-hh140 c-br10 c-text-hidden c-mr10 c-flex-row c-flex-center c-p"
        v-for="(imgItem, imgIndex) in uploadImgList"
        :key="imgIndex"
      >
        <div
          class="del-img iconfont"
          @click="delUploadImage(imgIndex)"
        >&#xe8fd;</div>
        <img
          class="c-w100 c-h c-object-fit-cover"
          @click="clickPreviewImage(imgIndex,imgItem,uploadImgList)"
          :src="$addXossFilter(imgItem)"
          alt=""
        />
      </div>
      <div
        class="c-ww140 c-hh140 c-flex-row c-flex-center c-p"
        v-if="(uploadImgList && uploadImgList.length < 4) || !uploadImgList"
      >
        <div
          class="c-ww140 c-hh140 c-flex-row c-flex-center c-br8 c-text-hidden c-bg-sgray"
          @click="clickChoosePic"
        >
          <div class="c-flex-column c-aligni-center c-justify-center">
            <i class="iconfont c-fs40 c-fc-gray">&#xe689;</i>
            <span class="c-fc-gray c-fs22 c-mt10">{{uploadImgList.length}}/4</span>
          </div>
        </div>
        <input
          id="uploadImg"
          class="c-pa c-opacity0 c-p-t0 c-p-l0 c-ww140 c-hh140 c-fs10"
          v-if="!isWeiXin"
          name="file"
          type="file"
          accept="image/*"
          @change="clickChoosePic($event)"
        />
      </div>
    </div>
    <div
      class="c-pf c-p-b0 c-w100 c-maxw640 c-hh124 c-bg-white c-ph24 c-flex-row c-justify-center c-aligni-center"
      @click="handleClickSend()"
    >
      <div
        class="c-fs28 c-fc-white theme-bg-gradient c-w100 c-hh64 c-br30 c-flex-row c-justify-center c-aligni-center c-opacity30"
        :class="this.questionDesc == '' ? 'c-opacity30':'c-opacity100'"
      >提交</div>
    </div>
  </div>
</template>

<script>
import { utilJs, wxUtilJs } from "@/utils/common.js";
let imgData = {};
let serverIdImgArr = [];
export default {
  name: "ReportDetail",
  data() {
    return {
      questionDesc: "",
      isWeiXin: true,
      imageCount: 4,
      uploadImgList: [],
      reportType: "",
      reportFrom: "",
      reportTypeMap: {
        1: "色情低俗",
        2: "时政不实信息",
        3: "违规广告、垃圾营销",
        4: "涉未成年人不良信息",
        5: "涉嫌诈骗",
        6: "违法犯罪",
        7: "侵权、抄袭、冒充",
        8: "侮辱谩骂",
        9: "引人不适",
        10: "诱导点赞、关注、分享",
        11: "其他"
      },
      reportFromMap: {
        1: "视频",
        2: "直播",
        3: "头像/昵称/背景图/个人介绍",
        4: "群聊",
        5: "课程评论",
        6: "直播评论",
        7: "其他"
      },
      isClick: false,
      imgUrlListJson: "",
    }
  },
  activated() {
    setDocumentTitle("用户举报");
    this.$store.commit('updateLoadingStatus', {
      isLoading: false
    });
    this.questionDesc = "";
    this.imageCount = 4;
    this.reportType = this.$route.query.reportType || "";
    this.reportFrom = this.$route.query.reportFrom || "";
    this.isClick = false;
    this.isWeiXin = utilJs.isWeiXin();
    this.imgUrlListJson = "";
    this.uploadImgList = [];
    //获取阿里云签名，除了微信浏览器以外
    if (!utilJs.isWeiXin()) {
      utilJs.getAliSign(`${global.apiurl}imageSign`, res => {
        imgData = res;
      });
    }
  },
  created() {
    utilJs.appShare(this);
  },
  methods: {
    handleClickSend() {
      let _this = this;
      if (this.questionDesc == '') {
        this.$showCjToast({
          text: "请输入举报描述",
          type: "warn",
        });
        return true;
      }
      if (this.isClick) {
        return true;
      }
      this.isClick = true;
      this.imgUrlListJson = JSON.stringify(this.uploadImgList)
      utilJs.postMethod(global.apiurl + `illegalReport/addIllegalReport`, {
        reportType: this.reportType,
        reportFrom: this.reportFrom,
        reportDesc: this.questionDesc,
        reportSource: [{
          type: 1,
          imgUrl: this.imgUrlListJson
        }]
      }, res => {
        this.$showCjToast({
          text: "举报成功",
          type: "success",
        }).then(() => {
          _this.$router.go(-3);
        });
      }, failRes => {
        this.isClick = false;
      })
    },
    // 删除图片
    delUploadImage(index) {
      this.uploadImgList.splice(index, 1);
      this.imageCount = 4 - this.uploadImgList.length;
    },
    // 图片预览
    clickPreviewImage(index, imgUrl, imgs) {
      if (!imgUrl) {
        return;
      }
      let imgArr = [];
      for (let key of imgs) {
        imgArr.push(key);
      }
      wxUtilJs.previewImage({
        current: imgUrl, // 当前显示图片的http链接
        urls: imgArr // 需要预览的图片http链接列表
      });
    },
    clickChoosePic(event) {
      if (this.uploadImgList && this.uploadImgList.length == 9) {
        return
      }
      if (this.isWeiXin) {
        wxUtilJs.chooseImage({
          count: this.imageCount, // 默认4
          sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ["album", "camera"] // 可以指定来源是相册还是相机，默认二者都有
        }).then(localIds => {
          localIds.reverse();
          this.$loading.show({
            text: "上传中..."
          });
          serverIdImgArr = [];
          //获取剩余能传多少张图片，若已选的图片数量大于剩余数。则只传剩余数量的图片
          let residueLength = 4 - this.uploadImgList.length;
          if (localIds.length > residueLength) {
            localIds.length = residueLength;
          }
          this.wxUploadImg(localIds, localIds.length - 1);
        })
      } else {
        utilJs.imgUpload(event.target.files, imgData, 'report', res => {
          if (res.length > 0) {
            this.uploadImgList.push(res);
            document.getElementById("uploadImg").value = null;
          }
        }, fRes => { });
      }
    },
    //上传图片到微信-----IOS不能一次性传多张，只好递归传
    wxUploadImg(localIds, localIdsLength) {
      wxUtilJs
        .uploadImage({ localId: localIds[localIdsLength] }, true)
        .then(res => {
          serverIdImgArr.push(res);
          if (localIdsLength > 0) {
            this.wxUploadImg(localIds, --localIdsLength);
          } else {
            this.syncUploadPic(serverIdImgArr);
          }
        });
    },
    //上传图片到服务器
    syncUploadPic(serverIdArr) {
      utilJs.postMethod(
        global.apiurl + "common/forms/wxUploadImg",
        {
          serverId: JSON.stringify(serverIdArr),
          mediaType: 2
        },
        res => {
          this.$loading.hide();
          if (res.length > 0) {
            this.uploadImgList = [...this.uploadImgList, ...res];
            this.imageCount = 4 - this.uploadImgList.length;
          }
        },
        failRes => {
          this.$loading.hide();
        }
      );
    },
    //手机端分享
    appShare: function () {
      let title = window.localStorage.getItem("shareTitle");
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl = `${window.location.href.split("#")[0]}#?refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = '点击查看详情';
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    }
  }
}
</script>

<style lang="less" scoped>
textarea {
  resize: none;
  line-height: 0.85rem;
}
.del-img {
  position: absolute;
  top: 0rem;
  right: 0rem;
  cursor: pointer;
  font-size: 0.25rem;
  width: 0.8rem;
  height: 0.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.del-img::before {
  z-index: 10;
}
.del-img::after {
  position: absolute;
  height: 1.8rem;
  width: 1.8rem;
  top: -0.9rem;
  right: -0.9rem;
  content: "";
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
}
</style>